<template>
	<div class="system-menu-container">
		<div class="card-bg energy-table">
			<el-form-item>
				<div class="btn1 ml10" @click="onOpenAddMenu('')">
					<el-icon> <ele-Plus /> </el-icon><span class="ml6">添加</span>
				</div>
			</el-form-item>

			<!-- 表格 -->
			<el-table
				v-loading="state.tableData.loading"
				:data="state.tableData.data"
				style="width: 100%"
				row-key="path"
				:tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
				:row-style="{ background: '#0F2C6A' }"
				:header-cell-style="{ background: '#1E4897', color: '#499AFD' }"
				size="default"
			>
				<el-table-column label="菜单标题" width="300" show-overflow-tooltip fixed>
					<template #default="scope">
						<SvgIcon :name="scope.row.icon" />
						<span class="ml10">{{ scope.row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="菜单名称" width="250" show-overflow-tooltip>
					<template #default="scope">
						<span class="ml10">{{ scope.row.menuName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="路由地址" width="250" show-overflow-tooltip></el-table-column>
				<el-table-column label="组件路径" width="300" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.component || '暂无' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="权限标识" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.perms }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="权限类型" width="110" show-overflow-tooltip>
					<template #default="scope">
						<div :class="scope.row.type === 1 ? 'energy-tag1' : 'energy-tag2'">
							<el-tag size="default">{{ scope.row.type === 1 ? '菜单' : '按钮' }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="状态" width="110" show-overflow-tooltip>
					<template #default="scope">
						<el-switch
							v-model="scope.row.status"
							size="default"
							:active-value="0"
							:inactive-value="1"
							active-text="启用"
							inactive-text="禁用"
							inline-prompt
							style="--el-switch-on-color: #13ce66"
							@click="changeStatus(scope.row)"
						/>
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" show-overflow-tooltip fixed="right" width="120">
					<template #default="scope">
						<el-button link size="small" type="success" plain @click="onOpenAddMenu(scope.row)">修改</el-button>
						<el-button link size="small" type="danger" plain @click="delMenuItem(scope.row)">删除</el-button>
					</template>
				</el-table-column>
				<template #empty>
					<NoData></NoData>
				</template>
			</el-table>
		</div>
		<MenuDialog ref="menuDialogRef" @refresh="getTableData()" :allMenuData="state.tableData.data" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import { useMenuApi } from '/@/api/menu';

// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));

// 定义变量内容
const menuDialogRef = ref();
const state: any = reactive({
	idList: [], // 切换状态的idList
	tableData: {
		data: [],
		loading: false,
	},
});

// 获取总菜单权限树
const getTableData = async () => {
	state.tableData.loading = true;
	const { data } = await useMenuApi().getAllMenu();
	state.tableData.data = data.sort((a: any, b: any) => a.sortNo - b.sortNo);
	state.tableData.loading = false;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 2000);
};

// 打开新增/编辑菜单弹窗
const onOpenAddMenu = (row?: any) => {
	menuDialogRef.value.openDialog(row);
};

// 删除菜单
const delMenuItem = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除权限：${row.title} , 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const data = await useMenuApi().deleteMenuById(row.id);
			if (data.code == 200) {
				ElNotification({
					title: '提示',
					message: '删除成功',
					position: 'top-right',
					type: 'success',
				});
				getTableData();
			}
		})
		.catch(() => {});
};

// 修改菜单状态
const changeStatus = async (row: any) => {
	state.idList = [];
	filterMenuIdList(row);

	console.log(state.idList, 'state.idList');

	const data = await useMenuApi().switchMenu({
		menuIds: [...state.idList],
		status: row.status.toString(),
	});
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '权限状态切换成功',
			position: 'top-right',
			type: 'success',
		});
		getTableData();
	}
};

// 获取父菜单下所有子菜单的id
const filterMenuIdList = (menu: any) => {
	state.idList.push(menu.id);
	if (menu.childList && menu.childList.length) {
		menu.childList.forEach((item: any) => filterMenuIdList(item));
	}
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-menu-container {
	padding: 10px;
	width: 100%;
	height: 100%;

	.card-bg {
		width: 100%;
		height: 100%;
		padding: 10px;
		overflow: auto;
	}
}

:deep(.el-table) {
	.el-table__expand-icon {
		width: 20px;
		height: 20px;
		position: relative;
		top: 2px;

		.el-icon {
			font-size: 20px;
			font-weight: bold;
			color: #337ecc;
		}
	}
}
</style>
